<template>
  <div class="app-container">
    <generate-form ref="generateForm" :data="jsonData" :remote="remoteFuncs" :value="editData"/>
    <div class="generate-block">
      <el-button type="primary" @click="handleSubmit">提交</el-button>
      <el-button type="primary">重置</el-button>
    </div>
  </div>
</template>
<script>
import GenerateForm from '@/components/CreateForm/GenerateForm'
import '@/components/CreateForm/styles/FormCreate.css'
import { getCodeList } from '@/api/codelist'
import GenerateTable from '@/components/CreateTable/GenerateTable'
export default {
  name: 'AccountControlMaintenanceCl',
  components: {
    GenerateForm,
    GenerateTable
  },
  data: function() {
    return {
      jsonData: { 'list': [{ 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'select', 'name': '控制种类', 'icon': 'regular/caret-square-down', 'options': { 'defaultValue': '', 'multiple': false, 'disabled': false, 'clearable': false, 'placeholder': '', 'required': false, 'showLabel': false, 'width': '100%', 'options': [{ 'value': '下拉框1' }, { 'value': '下拉框2' }, { 'value': '下拉框3' }], 'remote': true, 'remoteOptions': [], 'props': { 'value': 'value', 'label': 'label' }, 'remoteFunc': 'kongzhizhonglei' }, 'key': '1539855083000_34467', 'model': 'select_1539855083000_34467', 'rules': [] }] }, { 'span': 10, 'list': [{ 'type': 'select', 'name': '限制类型', 'icon': 'regular/caret-square-down', 'options': { 'defaultValue': '', 'multiple': false, 'disabled': false, 'clearable': false, 'placeholder': '', 'required': false, 'showLabel': false, 'width': '100%', 'options': [{ 'value': '下拉框1' }, { 'value': '下拉框2' }, { 'value': '下拉框3' }], 'remote': true, 'remoteOptions': [], 'props': { 'value': 'value', 'label': 'label' }, 'remoteFunc': 'xianzhileixing' }, 'key': '1539855085000_59172', 'model': 'select_1539855085000_59172', 'rules': [] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1539855063000_66730' }, 'key': '1539855063000_66730', 'model': 'grid_1539855063000_66730', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'input', 'name': '账号', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'remoteFunc': 'func_1539855126000_95729' }, 'key': '1539855126000_95729', 'model': 'input_1539855126000_95729', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }, { 'span': 10, 'list': [{ 'type': 'input', 'name': '账户名称', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'remoteFunc': 'func_1539855128000_40771' }, 'key': '1539855128000_40771', 'model': 'input_1539855128000_40771', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1539855065000_83799' }, 'key': '1539855065000_83799', 'model': 'grid_1539855065000_83799', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'input', 'name': '账户余额', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'remoteFunc': 'func_1539855130000_8843' }, 'key': '1539855130000_8843', 'model': 'input_1539855130000_8843', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }, { 'span': 10, 'list': [{ 'type': 'input', 'name': '已控制金额', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'remoteFunc': 'func_1539855132000_14827' }, 'key': '1539855132000_14827', 'model': 'input_1539855132000_14827', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1539855067000_14225' }, 'key': '1539855067000_14225', 'model': 'grid_1539855067000_14225', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'input', 'name': '需控制金额', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'remoteFunc': 'func_1539855134000_93567' }, 'key': '1539855134000_93567', 'model': 'input_1539855134000_93567', 'rules': [{ 'type': 'string', 'message': '需控制金额格式不正确' }] }] }, { 'span': 10, 'list': [{ 'type': 'time', 'name': '终止日期', 'icon': 'regular/clock', 'options': { 'defaultValue': '', 'readonly': false, 'disabled': false, 'editable': true, 'clearable': true, 'placeholder': '', 'startPlaceholder': '', 'endPlaceholder': '', 'isRange': false, 'arrowControl': true, 'format': 'HH:mm:ss', 'required': false, 'width': '100%', 'remoteFunc': 'func_1539855106000_80312' }, 'key': '1539855106000_80312', 'model': 'time_1539855106000_80312', 'rules': [] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1539855068000_44629' }, 'key': '1539855068000_44629', 'model': 'grid_1539855068000_44629', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'select', 'name': '控制证明文件类别', 'icon': 'regular/caret-square-down', 'options': { 'defaultValue': '', 'multiple': false, 'disabled': false, 'clearable': false, 'placeholder': '', 'required': false, 'showLabel': false, 'width': '100%', 'options': [{ 'value': '下拉框1' }, { 'value': '下拉框2' }, { 'value': '下拉框3' }], 'remote': true, 'remoteOptions': [], 'props': { 'value': 'value', 'label': 'label' }, 'remoteFunc': 'kongzhizhengmingwenjianleibie' }, 'key': '1539855095000_22153', 'model': 'select_1539855095000_22153', 'rules': [] }] }, { 'span': 10, 'list': [{ 'type': 'input', 'name': '控制通知书编号', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'remoteFunc': 'func_1539855138000_52212' }, 'key': '1539855138000_52212', 'model': 'input_1539855138000_52212', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1539855070000_23828' }, 'key': '1539855070000_23828', 'model': 'grid_1539855070000_23828', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'input', 'name': '控制单位名称', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'remoteFunc': 'func_1539855140000_6524' }, 'key': '1539855140000_6524', 'model': 'input_1539855140000_6524', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }, { 'span': 10, 'list': [{ 'type': 'input', 'name': '控制单位公司代码', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'remoteFunc': 'func_1539855143000_93228' }, 'key': '1539855143000_93228', 'model': 'input_1539855143000_93228', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1539855072000_26277' }, 'key': '1539855072000_26277', 'model': 'grid_1539855072000_26277', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'textarea', 'name': '控制原因', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'pattern': '', 'placeholder': '', 'remoteFunc': 'func_1539855148000_26741' }, 'key': '1539855148000_26741', 'model': 'textarea_1539855148000_26741', 'rules': [] }] }, { 'span': 10, 'list': [] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1539855073000_68524' }, 'key': '1539855073000_68524', 'model': 'grid_1539855073000_68524', 'rules': [] }], 'config': { 'labelWidth': 100, 'labelPosition': 'right' }},
      editData: {},
      values: {},
      remoteFuncs: {
        kongzhizhonglei(resolve) {
          // 控制种类 select_1539855083000_34467
          // 获取到远端数据后执行回调函数
          // resolve(data)
          getCodeList('控制种类').then(response => { resolve(response.data) })
        },

        xianzhileixing(resolve) {
          // 限制类型 select_1539855085000_59172
          // 获取到远端数据后执行回调函数
          // resolve(data)
          getCodeList('限制类型').then(response => { resolve(response.data) })
        },

        kongzhizhengmingwenjianleibie(resolve) {
          // 控制证明文件类别 select_1539855095000_22153
          // 获取到远端数据后执行回调函数
          // resolve(data)
          getCodeList('控制证明文件类别').then(response => { resolve(response.data) })
        }
      }
    }
  },
  methods: {
    handleSubmit() {
      this.$refs.generateForm.getData().then(data => {
        // 数据校验成功
        // data 为获取的表单数据
      }).catch(e => {
        // 数据校验失败
      })
    }
  }
}
</script>
